// 父调子的方法
import { Input, Button } from "antd";
import type { InputRef } from "antd";
import React, { useRef, useImperativeHandle } from "react";

function Father() {
  const ChildRef = useRef<any>(null);
  const handleClick = () => {
    // ChildRef.current?.focus();
    ChildRef.current?.antdFocus();
  };
  return (
    <div className="parent">
      <Button type="primary" onClick={handleClick}>
        调用子组件的方法
      </Button>
      <Child ref={ChildRef} />
    </div>
  );
}

const Child = React.forwardRef((props, ref) => {
  const inputRef = useRef<HTMLInputElement>(null);
  const antdInputRef = useRef<InputRef>(null);
  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current?.focus();
    },
    antdFocus: () => {
      antdInputRef.current?.focus();
    },
  }));

  return (
    <div>
      <input ref={inputRef} type="text" />
      <Input ref={antdInputRef} type="text" />
    </div>
  );
});

export default Father;
